<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
  <link rel="icon" href="/public/images/favicon.ico">
  <link href="/public/main/vuetify.min.css" rel="stylesheet" />
  <link href="/public/main/materialdesignicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/public/main/snackbar.min.css" />
  <link rel="stylesheet" type="text/css" href="/public/main/xgplayer.min.css" />
  <script src="/public/main/vue.min.js"></script>
  <script src="/public/main/vuetify.min.js"></script>
  <script src="/public/main/axios.js"></script>
  <script src="/public/main/particles.min.js"></script>
  <script type="text/javascript" src="/public/main/snackbar.js"></script>
  <script type="text/javascript" src="/public/main/xgplayer.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="/public/main/xgplayer.hls.min.js" charset="utf-8"></script>
  <script src="/public/main/qs.min.js"></script>
  <script>
    (() => {
      axios.post('/v1/config/space')
        .then(res => {
          let dat = res.data.data;
          window.base = dat;
        });
    })();

    const particles = {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": [
            "#2EB67D",
            "#ECB22E",
            "#E01E5B",
            "#36C5F0"
          ]
        },
        "shape": {
          "type": [
            "circle"
          ],
          "stroke": {
            "width": 0,
            "color": "#fff"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "https://cdn.freebiesupply.com/logos/large/2x/slack-logo-icon.png",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 1,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 8,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 10,
            "size_min": 10,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#808080",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 5,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 140,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    }
  </script>
  <style>
    .rating {
      line-height: 0;
    }

    .rating>button {
      padding: 0 !important;
    }

    @font-face {
      font-family: 'DIN-BoldItalic';
      src: url(/public/main/DIN-BoldItalic.ttf);
    }
  </style>
</head>